<script setup>
import { ref, onMounted } from "vue";
import { VueUiCirclePack, VueUiDonut } from "vue-data-ui";
import "vue-data-ui/style.css"; // If you are using multiple components, place styles import in your main
import axios from "axios";

const bubbleConfig = ref({
  theme: "",
  customPalette: [],
  userOptions: {
    show: true,
    showOnChartHover: false,
    keepStateOnChartLeave: true,
    position: "right",
    buttons: {
      tooltip: false,
      pdf: true,
      csv: true,
      img: true,
      table: true,
      labels: false,
      fullscreen: true,
      sort: false,
      stack: false,
      animation: false,
      annotator: true,
    },
    buttonTitles: {
      open: "Open options",
      close: "Close options",
      pdf: "Download PDF",
      csv: "Download CSV",
      img: "Download PNG",
      table: "Toggle table",
      fullscreen: "Toggle fullscreen",
      annotator: "Toggle annotator",
    },
    print: {
      allowTaint: false,
      backgroundColor: "#FFFFFFff",
      useCORS: false,
      onclone: null,
      scale: 2,
      logging: false,
    },
  },
  table: {
    show: false,
    responsiveBreakpoint: 400,
    th: {
      backgroundColor: "#FFFFFFff",
      color: "#1A1A1Aff",
      outline: "none",
    },
    td: {
      backgroundColor: "#FFFFFFff",
      color: "#1A1A1Aff",
      outline: "none",
    },
    columnNames: {
      datapoint: "Datapoint",
      value: "Value",
    },
  },
  style: {
    fontFamily: "inherit",
    chart: {
      backgroundColor: "#FFFFFFff",
      color: "#1A1A1Aff",
      title: {
        text: "前端课程",
        color: "#1A1A1Aff",
        fontSize: 20,
        bold: true,
        textAlign: "center",
        paddingLeft: 0,
        paddingRight: 0,
        subtitle: {
          color: "#A1A1A1ff",
          text: "收藏人数",
          fontSize: 16,
          bold: false,
        },
      },
      circles: {
        stroke: "#FFFFFFff",
        strokeWidth: 1,
        gradient: {
          show: true,
          intensity: 40,
        },
        labels: {
          name: {
            fontSizeRatio: 1,
            show: true,
            bold: false,
            offsetY: 0,
            color: "auto",
          },
          value: {
            fontSizeRatio: 1,
            show: true,
            color: "auto",
            rounding: 0,
            prefix: "",
            suffix: "",
            formatter: null,
            bold: false,
            offsetY: 0,
          },
        },
        zoom: {
          show: true,
          shadowForce: 1,
          opacity: 0.8,
          animationFrameMs: 200,
          zoomRatio: 1,
          label: {
            name: {
              fontSize: 14,
              bold: false,
              offsetY: 0,
              color: "auto",
            },
            value: {
              fontSize: 14,
              bold: false,
              offsetY: 0,
              rounding: 0,
              prefix: "",
              suffix: "",
              formatter: null,
              color: "auto",
            },
          },
        },
      },
    },
  },
});

const bubbleDataset = ref([]);

const donutConfig = ref({
  type: "classic",
  responsive: true,
  theme: "",
  customPalette: [],
  useCssAnimation: true,
  useBlurOnHover: true,
  userOptions: {
    show: true,
    showOnChartHover: false,
    keepStateOnChartLeave: true,
    position: "right",
    buttons: {
      tooltip: true,
      pdf: true,
      csv: true,
      img: true,
      table: true,
      labels: true,
      fullscreen: true,
      sort: false,
      stack: false,
      animation: false,
      annotator: true,
    },
    buttonTitles: {
      open: "Open options",
      close: "Close options",
      tooltip: "Toggle tooltip",
      pdf: "Download PDF",
      csv: "Download CSV",
      img: "Download PNG",
      table: "Toggle table",
      labels: "Toggle labels",
      fullscreen: "Toggle fullscreen",
      annotator: "Toggle annotator",
    },
    print: {
      allowTaint: false,
      backgroundColor: "#FFFFFFff",
      useCORS: false,
      onclone: null,
      scale: 2,
      logging: false,
    },
  },
  translations: {
    total: "Total",
    average: "Average",
  },
  table: {
    show: false,
    responsiveBreakpoint: 400,
    th: {
      backgroundColor: "#FFFFFFff",
      color: "#1A1A1Aff",
      outline: "none",
    },
    td: {
      backgroundColor: "#FFFFFFff",
      color: "#1A1A1Aff",
      outline: "none",
      roundingValue: 0,
      roundingPercentage: 0,
    },
    columnNames: {
      series: "Series",
      value: "Value",
      percentage: "Percentage",
    },
  },
  style: {
    fontFamily: "inherit",
    chart: {
      useGradient: true,
      gradientIntensity: 40,
      backgroundColor: "#FFFFFFff",
      color: "#1A1A1Aff",
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
      },
      layout: {
        curvedMarkers: true,
        labels: {
          dataLabels: {
            show: true,
            useLabelSlots: false,
            hideUnderValue: 3,
            prefix: "",
            suffix: "",
          },
          value: {
            rounding: 0,
            show: true,
            formatter: null,
          },
          percentage: {
            color: "#1A1A1Aff",
            bold: true,
            fontSize: 18,
            rounding: 0,
            formatter: null,
          },
          name: {
            color: "#1A1A1Aff",
            bold: false,
            fontSize: 14,
          },
          hollow: {
            show: true,
            total: {
              show: true,
              bold: false,
              fontSize: 18,
              color: "#AAAAAAff",
              text: "Total",
              offsetY: 0,
              value: {
                color: "#1A1A1Aff",
                fontSize: 18,
                bold: true,
                suffix: "",
                prefix: "",
                offsetY: 0,
                rounding: 0,
                formatter: null,
              },
            },
            average: {
              show: true,
              bold: false,
              fontSize: 18,
              color: "#AAAAAAff",
              text: "Average",
              offsetY: 0,
              value: {
                color: "#1A1A1Aff",
                fontSize: 18,
                bold: true,
                suffix: "",
                prefix: "",
                offsetY: 0,
                rounding: 0,
                formatter: null,
              },
            },
          },
        },
        donut: {
          strokeWidth: 64,
          borderWidth: 1,
          useShadow: false,
          shadowColor: "#1A1A1A",
        },
      },
      comments: {
        show: true,
        showInTooltip: true,
        width: 100,
        offsetY: 0,
        offsetX: 0,
      },
      legend: {
        show: true,
        bold: false,
        backgroundColor: "#FFFFFFff",
        color: "#1A1A1Aff",
        fontSize: 16,
        roundingValue: 0,
        roundingPercentage: 0,
      },
      tooltip: {
        show: true,
        color: "#1A1A1Aff",
        backgroundColor: "#FFFFFFff",
        fontSize: 18,
        customFormat: null,
        borderRadius: 5,
        borderColor: "#e1e5e8",
        borderWidth: 1,
        backgroundOpacity: 30,
        position: "center",
        offsetY: 24,
        showValue: true,
        showPercentage: true,
        roundingValue: 0,
        roundingPercentage: 0,
      },
      title: {
        text: "前端课程收藏人数",
        color: "#1A1A1Aff",
        fontSize: 26,
        bold: true,
        textAlign: "center",
        paddingLeft: 0,
        paddingRight: 0,
        subtitle: {
          color: "#A1A1A1ff",
          text: "",
          fontSize: 20,
          bold: false,
        },
      },
    },
  },
});

const donutDataset = ref([]);

function getCourseList() {
  axios.get("http://localhost:3000/courses").then((res) => {
    console.log(res.data);
    res.data.forEach((item) => {
      bubbleDataset.value.push({
        name: item.name,
        value: item.favorite,
        color: null,
      });

      donutDataset.value.push({
        name: item.name,
        values: [item.favorite],
        color: null,
      });
    });
  });
}

onMounted(() => {
  getCourseList();
});
</script>
<template>
  <!-- Using a wrapper is optional -->
  <div class="dashboard">
    <div class="bubbleChart">
      <VueUiCirclePack :config="bubbleConfig" :dataset="bubbleDataset" />
    </div>
    <div class="donutChart">
      <VueUiDonut :config="donutConfig" :dataset="donutDataset" />
    </div>
  </div>
</template>

<style scoped>
.bubbleChart, .donutChart {
  width: 48%;
  height: 90vh;
  margin: 16px;
}
.dashboard {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>